<template>
    <div class="sign-up-info">
        <div class="search-content">
            <!-- <el-input class="search-content-input" v-model="searchContent.groupName" placeholder="请输入团购名称"></el-input> -->
            <div class="time-range-wrapper" >
                <span class="time-range-label">发放时间：</span>
                <el-date-picker
                        v-model="searchContent.addTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="time-range-wrapper" >
                <span class="time-range-label">核销时间：</span>
                <el-date-picker
                        v-model="searchContent.verifyTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>         
            <el-input class="search-content-input" v-model="searchContent.uc_pc_id" placeholder="主券ID"></el-input>
            <el-input class="search-content-input" v-model="searchContent.uc_pc_name" placeholder="卡券名称"></el-input>               
            <el-input class="search-content-input" v-model="searchContent.member_mobile" placeholder="会员手机号"></el-input>
            <el-input class="search-content-input" v-model="searchContent.verify_people" placeholder="核销人员"></el-input>
            <el-input class="search-content-input" v-model="searchContent.store_name" placeholder="发放店铺"></el-input>
            <el-select v-model="searchContent.project_class" placeholder="请选择卡券分类">
                <el-option
                        v-for="item in channelList"
                        :key="item.id"
                        :label="item.project_class_name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="searchContent.state" placeholder="请选择状态">
                <el-option
                        v-for="item in statelist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="couponList" border :height="oHeight">
                <el-table-column
                        align="center"
                        prop="id"
                        label="ID"
                        min-width="60">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="uc_pc_id"
                        label="卡券ID"
                        min-width="60">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="uc_pc_name"
                        label="卡券名称"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="uc_class_name"
                        label="卡券分类"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="uc_member_mobile"
                        label="用户手机"
                        min-width="120">
                </el-table-column>                
                <el-table-column
                        align="center"
                        label="抵扣金额	"
                        prop="uc_deduction_price"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="store_name"
                        label="使用店铺	"
                        min-width="90">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="发放日期"
                        min-width="90">     
                        <template slot-scope="scope">
                            {{dateFormat(scope.row.uc_addtime)}}
                        </template>                                       
                </el-table-column>
                <el-table-column
                    align="center"
                    label="截止日期"
                    min-width="90">
                        <template slot-scope="scope">
                            {{dateFormat(scope.row.uc_endtime)}}
                        </template>                                    
                </el-table-column>                
                <el-table-column
                        align="center"
                        prop="uc_verify_people"
                        label="核销人员	"
                        min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="核销日期"
                    min-width="90">
                        <template slot-scope="scope">
                            {{dateFormat(scope.row.uc_verify_time)}}
                        </template>                                       
                </el-table-column>                 
                <el-table-column
                    align="center"
                    label="使用状态"
                    min-width="90">
                        <template slot-scope="scope">
                            {{computedCheckStatus(scope.row.uc_state)}}
                        </template>                
               </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group" >
                    <a class="btn-bottom" style="cursor:pointer" @click="exportLink">导出</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchContent.curpage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchContent.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {dateFormatter} from "../../../../common/js/util";
	import { resize } from "@/common/js/height.js";
	import Qs from 'qs'

	export default {
		data() {
			return {
                couponList:[],
                statelist: [
                    {label: '全部 ', value:''},
					{label: '未使用 ', value: 1},
					{label: '已使用', value: 2},
					{label: '已过期 ', value: 3},
					{label: '已失效', value: 4},
					{label: '未激活', value: 5},                   
                ],  
                channelList: [],//卡券分类
				oHeight: 800,
				searchContent: {
                    addTime:'',
                    verifyTime:'',
					add_start_time: '',
                    add_end_time: '',
                    verify_start_time:'',
                    verify_end_time:'',
                    verify_people:'',
                    member_mobile:'',
                    store_name:'',
					project_class: '',
                    state: '',
                    curpage:1,
					pagesize: localStorage.getItem("pageSize") * 1 || 10,
                    form_submit:'',
                    uc_pc_name:'',
                    uc_pc_id :'',
                },
                searchObj:{},
				total: 0
			}
        },
        created(){
            this.getListData();
        },        
		computed: {

		},
		methods: {
           
            computedCheckStatus(code) {
                
				switch (code*1) {
					case 1:
						return '未使用';
					case 2:
						return '已使用';
					case 3:
                        return '已过期';
					case 4:
                        return '已失效';
					case 5:
                        return '未激活';                                                
				}
			},
			search() {
				this.searchContent.curpage = 1;
				this.getListData();
            },
            resetSearchData(){
                this.searchContent={
                    curpage:1,
                    pagesize:localStorage.getItem('pagesize')*1||10,
                }
                this.getListData();
            },
			handleSizeChange(pagesize) {
                localStorage.setItem("pageSize", pagesize)
				this.searchContent.pagesize = pagesize;
				this.searchContent.curpage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.curpage = page;
				this.getListData();
			},
			getListData() {
                const data = {};
                data.form_submit = '';      
				data.store_name = this.searchContent.store_name;
                data.verify_people  = this.searchContent.verify_people;
                data.project_class  = this.searchContent.project_class;
                data.member_mobile  = this.searchContent.member_mobile;
                data.state = this.searchContent.state;
                data.uc_pc_id  = this.searchContent.uc_pc_id ;
                data.uc_pc_name = this.searchContent.uc_pc_name;
                if (this.searchContent.addTime) {
					const startAddMS = this.searchContent.addTime[0].getTime();
					const endAddMS = this.searchContent.addTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.add_start_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.add_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.add_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.addTime[0]);
						data.add_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
                }
                if (this.searchContent.verifyTime) {
					const startAddMS = this.searchContent.verifyTime[0].getTime();
					const endAddMS = this.searchContent.verifyTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.verify_start_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.verify_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.verify_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.verifyTime[0]);
						data.verify_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
				}                
				this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=get_ucoupon_store_list&pagesize='+this.searchContent.pagesize+'&curpage='+this.searchContent.curpage+'', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list) {
							this.couponList = res.data.list.map(function(item) {
								return {
                                    id:item.id,
                                    uc_pc_name:item.uc_pc_name,
                                    uc_class_name:item.uc_class_name,
                                    uc_member_mobile:item.uc_member_mobile,
                                    uc_deduction_price:item.uc_deduction_price,
                                    uc_use_condition:item.uc_use_condition,
                                    store_name:item.store_name,
                                    uc_sum:item.uc_sum,
                                    uc_remaining:item.uc_remaining,
                                    uc_send_num:item.uc_send_num,
                                    uc_addtime:item.uc_addtime,
                                    uc_endtime:item.uc_endtime,
                                    uc_state:item.uc_state,
                                    uc_verify_time:item.uc_verify_time,
                                    uc_verify_people:item.uc_verify_people,
								}
							});
                            this.total = parseInt(res.data.TotalNum);
                            this.channelList=res.data.class_list;
						} else {
							this.couponList = [];
							this.total = 0;
						}
					}else if (res.code == 2001) {
						this.couponList = [];
						this.total = 0;
					}else {
						alert(res.msg);
					}
				})
            },
            dateFormat(row) {
                if(row){
                console.log('888888',row);
                var timestamp = row;
                var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                console.log('1111',timestamp);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                return Y+M+D;     
                }else{
                  return '';
                }                    
            },
			exportLink() {
				const data = {};
				data.form_submit = "1";
				data.store_name = this.searchContent.store_name;
                data.verify_people  = this.searchContent.verify_people;
                data.project_class  = this.searchContent.project_class;
                data.member_mobile  = this.searchContent.member_mobile;
                data.state = this.searchContent.state;
                data.uc_pc_id  = this.searchContent.uc_pc_id ;
                data.uc_pc_name = this.searchContent.uc_pc_name;                
                if (this.searchContent.addTime) {
					const startAddMS = this.searchContent.addTime[0].getTime();
					const endAddMS = this.searchContent.addTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.add_start_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.add_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.add_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.addTime[0]);
						data.add_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
                }
                if (this.searchContent.verifyTime) {
					const startAddMS = this.searchContent.verifyTime[0].getTime();
					const endAddMS = this.searchContent.verifyTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.verify_start_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.verify_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.verify_start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.verifyTime[0]);
						data.verify_end_time  = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
				}            
				let domain = document.domain;
				var url = location.protocol + '//' + domain.replace('admin', 'api') + '/admin/platform_coupon/index.php?act=platform_coupon&op=get_ucoupon_store_list';                              
                for (var key in data) {
                        if (
                        !(
                            data[key] === null ||
                            data[key] === "" ||
                            data[key] === undefined
                        )
                        ) {
                        url += "&" + key + "=" + data[key];
                        }
                    }    
                console.log(url);
               window.location.href = url;                      
            }                           
		},
		mounted() {
			resize(this)
		},
	}
</script>

<style lang="scss" scoped>
    .sign-up-info {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
</style>